<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Editor Test</title>
<link href="http://assets.taobaocdn.com/tbsp/reset-grids.css?t=20090602.css" rel="stylesheet"/>
<link href="../build/theme/cool/editor-pkg.css" rel="stylesheet" id="theme"/>
<script>
    //document.domain="taobao.net";
</script>
</head>
<body>

<h1>KISSY Editor Demo</h1>

<p>
    <label>选择主题：
        <select id="themes">
            <option value="google">
                google
            </option>
            <option value="cool">
                清爽
            </option>
        </select></label>

</p>
<form>
    <div style="width: 90%; margin: 0 auto">
        <p>
            <label for="editor">Editor Instance 1:</label>
        </p>
        <p>
            <button id='destroy1'>destroy实例</button>
            <button id='recover1'>重建实例</button>
        </p>
        <textarea id="editor" tabindex="0" style="width:100%;height:400px;margin:0 auto;">
            <script>alert(1);</script>
            <p>
                我是虾米音乐
            </p>
            <p>
                <embed width="257" height="33"
                       allownetworking="internal"
                       allowscriptaccess="never"
                       type="application/x-shockwave-flash"
                       src="http://www.xiami.com/widget/235508_2734338/singlePlayer.swf"
                       quality="high"/>
                111111111111111111111111
                <embed src="http://www.xiami.com/widget/0_1806480/singlePlayer.swf"
                       type="application/x-shockwave-flash" width="257" height="33"
                       wmode="transparent"></embed>
                1111111111111111111111
            </p>

            <p>我是音乐：</p>
            <p>
                111111111111111111111
                <object height="37"
                        align=""
                        width="165"
                        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
                        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
                    <param
                            value="../src/plugins/music/niftyplayer.swf?file=../src/plugins/music/betty.mp3"
                            name="movie"/>
                    <param value="high" name="quality"/>
                    <param name="wmode" value="transparent"/>
                    <param value="#FFFFFF" name="bgcolor"/>
                    <embed height="37"
                           align=""
                           wmode="transparent"
                           width="165"
                           pluginspage="http://www.macromedia.com/go/getflashplayer"
                           swliveconnect="true"
                           type="application/x-shockwave-flash"
                           bgcolor="#FFFFFF"
                           quality="high"
                           src="../src/plugins/music/niftyplayer.swf?file=../src/plugins/music/betty.mp3">
                    </embed>
                </object>
                1111111111111111
            </p>
            <p> 1 2 3 4 5 6 7 78 <a href="http://www.g.cn">我是google</a> 1 1 1 12234 3 45</p>
            <p>我是段落 <span style="background-color: red;"> 我是段落 我是段落 </span> 我是段落 <img src="http://img05.taobaocdn.com/tps/i5/T117hGXndsXXXXXXXX-15-13.gif"> 我是段落 我是段落 </p>  <p> 我是段落 我是段落 <br></p>
            <p>我是图片 <img style="width: 470px; height: 150px;"
                         src="http://img02.taobaocdn.com/tps/i2/T1xjtKXmtrXXXXXXXX-470-150.jpg"
                         alt=""></p>


            <p>我是视频优酷</p>
            <p>
                11111111111111111111
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="400" width="480">
                    <param name="quality" value="high"/>
                    <param name="wmode" value="transparent"/>
                    <param name="movie" value="http://player.youku.com/player.php/sid/XMjA0MTgwMjIw/v.swf"/>
                    <embed height="400"
                           wmode="transparent"
                           pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://player.youku.com/player.php/sid/XMjA0MTgwMjIw/v.swf" type="application/x-shockwave-flash" width="480"/>

                </object>
                1111111111111111111
            </p>

            <p>我是表格，支持右键</p>
            <table style="width: 200px;" border="1" cellpadding="1" cellspacing="1">
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3 <span>3.1</span> 3.2 <span>3.3</span></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                </tbody>
            </table>

            <p>我是段落 <span style="background-color: red;"> 我是段落 我是段落 </span> 我是段落 <img src="http://img05.taobaocdn.com/tps/i5/T117hGXndsXXXXXXXX-15-13.gif"> 我是段落 我是段落 </p>  <p> 我是段落 我是段落 <br></p>

            <p>我是flash：</p>
            <p>
                11111111111111
                <embed width="257" height="33"
                       allownetworking="internal"
                       allowscriptaccess="never"
                       type="application/x-shockwave-flash"
                       src="http://www.xiami2.com/widget/235508_2734338/singlePlayer.swf"
                       quality="high"/>
                111111111111
            </p>
            <ul>
                <li> 我是列表1</li>
                <li> 我是列表2
                    <ul>
                        <li><p>我是列表2.1</p></li>
                        <li> 我是列表2.2</li>
                        <li> 我是列表2.3</li>
                    </ul>
                </li>
                <li> 我是列表3</li>
            </ul>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <ul>
                <li> 我是列表1</li>
                <li> 我是列表2
                    <ul>
                        <li><p>我是列表2.1</p></li>
                        <li> 我是列表2.2</li>
                        <li> 我是列表2.3</li>
                    </ul>
                </li>
                <li><p>我是列表3</p></li>
            </ul>

            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>

        </textarea>
    </div>
    <input type="submit" value="submit"/>
</form>
<a href="http://www.g.cn"> leave </a>
<div style="width: 60%; margin: 50px auto;position:relative;overflow:hidden;">
    <label for="editor2">Editor Instance 2:</label>
    <textarea id="editor2" style="width:99%;height:400px;margin:0 auto;"></textarea>
</div>
<!--from kissy component start-->
<script src="../../kissy/build/kissy.js"></script>
<script src="../../kissy/build/uibase/uibase-pkg.js"></script>
<script src="../../kissy/build/dd/dd-pkg.js"></script>
<script src="../../kissy/build/overlay/overlay-pkg.js"></script>
<!--from kissy component end-->
<script>
    KISSY.ready(function(S) {
        var theme = S.one("#theme"),themes = S.one("#themes");
        themes.val("cool");
        themes.on("change", function() {
            var v = themes.val();
            theme.attr("href", "../build/theme/" + v + "/editor-pkg.css");
        });
    })
</script>
<script src="../src/editor.js"></script>
<script src="../src/core/utils.js"></script>
<script src="../src/core/dom.js"></script>
<script src="../src/core/focusmanager.js"></script>
<script src="../src/core/definition.js"></script>
<script src="../src/core/zindexmanager.js"></script>
<script src="../src/core/dtd.js"></script>
<script src="../src/core/elementpath.js"></script>
<script src="../src/core/walker.js"></script>
<script src="../src/core/range.js"></script>
<script src="../src/core/domiterator.js"></script>
<script src="../src/core/selection.js"></script>
<script src="../src/core/styles.js"></script>
<script src="../src/core/htmlparser/htmlparser.js"></script>
<script src="../src/core/htmlparser/basicwriter.js"></script>
<script src="../src/core/htmlparser/htmlwriter.js"></script>
<script src="../src/core/htmlparser/fragment.js"></script>
<script src="../src/core/htmlparser/element.js"></script>
<script src="../src/core/htmlparser/filter.js"></script>
<script src="../src/core/htmlparser/text.js"></script>
<script src="../src/core/htmlparser/comment.js"></script>
<script src="../src/core/ui/button/plugin.js"></script>
<script src="../src/core/ui/select/plugin.js"></script>
<!--
<script src="../src/plugins/button/plugin.js"></script>
<script src="../src/plugins/contextmenu/plugin.js"></script>
-->

<!--
<script src="../src/plugins/overlay/support/editor/focus_4e-ext.js"></script>
<script src="../src/plugins/overlay/support/editor/overlay.js"></script>
-->

<!--overlay component start
<script src="../src/plugins/overlay/plugin.js"></script>
overlay component end-->
<!--
<script src="../src/plugins/select/plugin.js"></script>
<script src="../src/plugins/bubbleview/plugin.js"></script>


<script src="../src/plugins/tabs/plugin.js"></script>
<script src="../src/plugins/progressbar/plugin.js"></script>
-->
<!--
<script src="../src/plugins/htmldataprocessor/plugin.js"></script>
<script src="../src/plugins/fakeobjects/plugin.js"></script>
<script src="../src/plugins/localstorage/plugin.js"></script>
-->
<!--草稿
<script src="../src/plugins/draft/plugin.js"></script>
<script src="../src/plugins/draft/support/plugin.js"></script>
-->
<!--源码
<script src="../src/plugins/sourcearea/support/plugin.js"></script>
<script src="../src/plugins/sourcearea/plugin.js"></script>
-->
<!--预览
<script src="../src/plugins/preview/plugin.js"></script>
-->
<!--模板
<script src="../src/plugins/templates/plugin.js"></script>
-->
<!--撤销
<script src="../src/plugins/undo/plugin.js"></script>
-->
<!--清除格式
<script src="../src/plugins/removeformat/plugin.js"></script>
-->
<!--字体
<script src="../src/plugins/font/plugin.js"></script>
-->
<!--格式
<script src="../src/plugins/format/plugin.js"></script>
-->
<!--颜色
<script src="../src/plugins/colorsupport/plugin.js"></script>
<script src="../src/plugins/color/plugin.js"></script>
-->
<!--列表
<script src="../src/plugins/list/plugin.js"></script>
<script src="../src/plugins/list/support/plugin.js"></script>
-->
<!--缩进
<script src="../src/plugins/indent/plugin.js"></script>
<script src="../src/plugins/indent/support/plugin.js"></script>
-->
<!--对齐
<script src="../src/plugins/justify/plugin.js"></script>
-->
<!--链接
<script src="../src/plugins/link/plugin.js"></script>
-->
<!--图像
<script src="../src/plugins/image/plugin.js"></script>
-->
<!--flash
<script src="../src/plugins/flashbridge/plugin.js"></script>
<script src="../src/plugins/flashutils/plugin.js"></script>
<script src="../src/plugins/flash/support/plugin.js"></script>
<script src="../src/plugins/flash/plugin.js"></script>
-->
<!--音乐
<script src="../src/plugins/music/plugin.js"></script>
<script src="../src/plugins/music/support/plugin.js"></script>
-->
<!--表格
<script src="../src/plugins/table/plugin.js"></script>
<script src="../src/plugins/table/support/plugin.js"></script>
-->
<!--表情
<script src="../src/plugins/smiley/plugin.js"></script>
<script src="../src/plugins/smiley/support/plugin.js"></script>
-->
<!--最大化
<script src="../src/plugins/maximize/plugin.js"></script>
<script src="../src/plugins/maximize/support/plugin.js"></script>
-->
<!--路径
<script src="../src/plugins/elementpaths/plugin.js"></script>
-->
<!--捕获粘贴
<script src="../src/plugins/clipboard/plugin.js"></script>
-->
<!--捕获 enter ,shift enter
<script src="../src/plugins/enterkey/plugin.js"></script>
-->
<!--大小调节
<script src="../src/plugins/resize/plugin.js"></script>
-->
<!--分页插入
<script src="../src/plugins/pagebreak/plugin.js"></script>
-->
<!--
<script src="../src/plugins/separator/plugin.js"></script>
-->
<!--
youku,ku6,tudou视频
-->
<script src="../src/biz/ext/plugins/video/plugin.js"></script>
<script src="../src/biz/ext/plugins/video/support/plugin.js"></script>
<!--
xiami 音乐
-->
<script src="../src/biz/ext/plugins/music/plugin.js"></script>
<script src="../src/biz/ext/plugins/music/support/plugin.js"></script>
<!--
xiami 音乐
-->
<script src="../src/biz/ext/plugins/upload/plugin.js"></script>


<script src="../src/biz/ext/plugins/sourcearea/support/plugin.js"></script>
<script src="../src/biz/ext/plugins/sourcearea/plugin.js"></script>
<script>
KISSY.ready(function(S) {

    S.use('editor', function() {

        var KE = KISSY.Editor;

        //document.domain="taobao.com";
        // just for test
        var base = location.href.replace(/^(.*kissy-editor\/).*$/i, '$1');
        KISSY.Config.base = base;
        KISSY.Config.debug = "dev";

        KE.Config.base = base + "src/plugins/";
        var cfg = {
            attachForm:true,
            baseZIndex:10000,
            //自定义样式
            //customStyle:"p{color:purple;}",
            //自定义外部样式
            //customLink:["http://localhost/customLink.css","http://xx.com/y2.css"],
            //是否一开始自动聚焦
            //focus:true,
            pluginConfig: {
                "image":{
                    upload:{
                        serverUrl:"/code/upload/web/upload.jsp",
                        serverParams:{
                            waterMark:function() {
                                return S.one("#ke_img_up_watermark_1")[0].checked;
                            }
                        },
                        surfix:"png,jpg,jpeg,gif",
                        fileInput:"Filedata",
                        sizeLimit:1000,//k
                        extraHtml:"<p style='margin-top:10px;'><input type='checkbox' id='ke_img_up_watermark_1' checked='checked'> 图片加水印，防止别人盗用</p>"
                    }
                },
                "flash":{
                    defaultWidth:"300",
                    defaultHeight:"300"
                },
                "templates": [
                    {
                        demo: "模板1效果演示html"  ,
                        html: "<div style='border:1px solid red'>模板1效果演示html</div><p></p>"
                    },
                    {
                        demo: "模板2效果演示html",
                        html: "<div style='border:1px solid red'>模板2效果演示html</div>"
                    }
                ],
                //"font-size":false,
                //"font-family":false,
                //"font-bold":false,
                // "font-italic":false,
                //"font-underline":false,
                //"font-strikeThrough":false,
                "multi-upload":{
                    serverUrl:"/code/upload/upload.jsp",
                    serverParams:{
                        waterMark:function() {
                            return S.one("#ke_img_up_watermark_2")[0].checked;
                        }
                    },
                    //previewSuffix:"_60x60",
                    previewWidth:"80px",
                    sizeLimit:1000//k,
                    ,numberLimit:15,
                    extraHtml:"<p style='margin-top:10px;'>" +
                            "<input type='checkbox' " +
                            "style='vertical-align:middle;margin:0 5px;' " +
                            "id='ke_img_up_watermark_2'>" +
                            "<span style='vertical-align:middle;'>图片加水印，防止别人盗用</span></p>"
                },
                "video":{
                    urlCfg:[
                        {
                            reg:/tudou\.com/i,
                            url:"http://bangpai.daily.taobao.net/json/getTudouVideo.htm?" +
                                    "url=@url@&callback=@callback@"//"&rand=@rand@"
                        }
                    ],
                    providers:[
                        {
                            reg:/youku\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                var m = url.match(/id_([^.]+)\.html$/);
                                if (m) {
                                    return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
                                }
                                m = url.match(/v_playlist\/([^.]+)\.html$/);
                                if (m) {
                                    return;
                                    //return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
                                }
                                return url;
                            }
                        },
                        {
                            reg:/tudou\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                return url;
                            }
                        },
                        {
                            reg:/ku6\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                var m = url.match(/show[^\/]*\/([^.]+)\.html$/);
                                if (m) {
                                    return "http://player.ku6.com/refer/" + m[1] + "/v.swf";
                                }
                                return url;
                            }
                        }/*,
                        {
                            reg:/taobaocdn\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                return url;
                            }
                        }*/
                    ]
                },
                music:{
                    //必须和网址url同域而不是类库同域
                    musicPlayer:KE.Config.base + "music/niftyplayer.swf"
                },
                "draft":{
                    interval:5,
                    limit:10,
                    helpHtml:  "<div " +
                            "style='width:200px;'>" +
                            "<div style='padding:5px;'>草稿箱能够自动保存您最新编辑的内容，" +
                            "如果发现内容丢失，" +
                            "请选择恢复编辑历史</div></div>"
                },
                "resize":{
                    direction:["y"]
                },

                dragupload:{
                    surfix:"png,jpg,jpeg,gif",
                    fileInput:"Filedata",
                    sizeLimit:1000,
                    serverUrl:"/code/upload/web/upload.jsp",
                    serverParams:{
                        waterMark:function() {
                            return true;
                        }
                    }
                }
            }
        };


        //if(1>2)
        function test() {
            window.editor2 = KE("#editor", S.clone(cfg)).use("elementpaths," +
                    "sourcearea,preview," +
                    "checkbox-sourcearea," +
                    "templates,separator," +
                    "undo,separator," +
                    "removeformat,font,format,color,separator," +
                    "list,indent," +
                    "justify,separator,link," +
                    "image,flash," +
                    "video," +
                    "music," +
                    "xiami-music," +
                    "smiley,separator,table,resize," +
                    "draft," +
                    "multi-upload," +
                    "pagebreak,separator,maximize,dragupload");

        }

        test();
        S.one('#destroy1').on("click", function(ev) {
            ev.halt();
            editor2.destroy();
            editor2 = null;
        });
        S.one('#recover1').on("click", function(ev) {
            ev.halt();
            if (!editor2) {
                test()
            }

        });

        window.editor3 = KE("#editor2", S.clone(cfg)).use("separator,undo");
    });
});


</script>
</body>
</html>